<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        table{
            margin: 50px auto;
            /* border: 1px solid red; */
            text-align: center;
            border-spacing: 0 ;
            /* 这行代码是让单元格与单元格之间边距为0 */
            width: 600px;
            height: 300px;
        }
        Caption{
            margin: 20px auto;
        }
        table th,
        td{
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <!-- <table >
        <Caption><h5>订单确认</h5></Caption>
       <tr> 
        <th>商品名称</th>
        <th>商品数量</th>
        <th>商品价格</th>
        <th>商品总价格</th>
        <th>发货地址</th>
        <th>邮寄地址</th>
    </tr>
    <tr>
        <td>大蛇丸子</td>
        <td>33</td>
        <td>566元</td>
        <td>20000元</td>
        <td>火星</td>
        <td>地球</td>
    </tr>
    </table> -->
    <script>
    let sl=prompt('请输入数量');
    let gg= prompt('请输入价格');
    let zzjg=sl*gg;
    let fhdz=prompt('请输入发货地址');
    let shdz=prompt('请输入收货地址');
    let html =` <table >
        <Caption><h5>订单确认</h5></Caption>
       <tr> 
        <th>商品名称</th>
        <th>商品数量</th>
        <th>商品价格</th>
        <th>商品总价格</th>
        <th>发货地址</th>
        <th>邮寄地址</th>
    </tr>
    <tr>
        <td>大蛇丸子</td>
        <td>${sl}</td>
        <td>${gg}元</td>
        <td>${zzjg}元</td>
        <td>${fhdz}</td>
        <td>${shdz}</td>
    </tr>
    </table>`
    document.write(html);
    </script>
</body>
</html>